<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <div id="root">
    </div>
    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->



    <script type="text/babel">
      function Button(props) {
        return null;
      }

      class Welcome extends React.Component {
        state = {isLike : true}
        componentDidMount() {
          // 组建挂载完毕
          return true;
        }

        static getDerivedStateFromProps(){
          console.log(111)
          return true
        }

        getSnapshotBeforeUpdate(prevProps, prevState) {
          return true;
        }



        render() {
          return <div>
            <h1 onClick={this.click}>hello</h1>
            <button onClick={this.click}>Hello</button>
          </div>;
        }
        click(){
          alert("dddd")
        }
      }
      const element = <h1>Hello, world</h1>;
      ReactDOM.render(<Welcome/>, document.getElementById('root'));
      // class Toggle extends React.Component {
      //   constructor(props) {
      //     super(props);
      //     this.state = {isToggleOn: true};
      //
      //     // 为了在回调中使用 `this`，这个绑定是必不可少的
      //     this.handleClick = this.handleClick.bind(this);
      //   }
      //
      //   handleClick() {
      //     this.setState(state => ({
      //       isToggleOn: !state.isToggleOn
      //     }));
      //   }
      //
      //   render() {
      //     return (
      //             <button onClick={this.handleClick}>
      //               {this.state.isToggleOn ? 'ON' : 'OFF'}
      //             </button>
      //     );
      //   }
      // }
      //
      // ReactDOM.render(
      //         <Toggle />,
      //         document.getElementById('root')
      // );
    </script>





  </body>
</html>